<template>
    <div class="con">
        <!-- 搜索框组件 -->
        <van-search v-model="value" show-action :placeholder="defaultKeyword.keyword" input-align="center" shape="round"
            @search="onSearch" @cancel="onCancel" @input="onInput" />

        <!-- 历史记录和热门搜索组件 -->
        <historyANDhot v-if="ifShow1" :hotKeywordList="hotKeywordList" :historyKeywordList="historyKeywordList"
            @findhistoryitem="getvalue"></historyANDhot>

        <!-- 商品列表的提示组件：input里为空就是 热门搜索 ；input内容改变就是 改变的内容（没有更多了） -->
        <searchTipCom v-if="ifShow2" :dynamicSearchTipsArr="dynamicSearchTipsArr" @sendval="getvalue">
        </searchTipCom>
        <!-- 商品列表顶部（全部-筛选-价格）组件 -->
        <serchTopCom v-if="ifShow3" :filterCategory="filterCategory" :goodsList="goodsList"
            @sendpriceChange="getPriceChangeVal" @sendcategoryChange="getcategoryChangeVal"></serchTopCom>


    </div>
</template>

<script>
import { Toast } from 'vant';
import { searchListApi, searchGoodsListApi, dynamicSearchListApi } from '@/api/SearchBoxAPi.js'
//引入历史记录和热门搜索组件
import historyANDhot from '@/components/searchCom/historyANDhot.vue'
// 导入商品列表顶部的全部-筛选-价格组件
import serchTopCom from '@/components/searchCom/SearchTop.vue'
// 导入商品列表的提示组件
import searchTipCom from '@/components/searchCom/SearchTipsList.vue'
// 导入商品列表的下方商品列表组件 
import searchCon from '@/components/searchCom/productsConList.vue'
export default {
    name: '',
    data() {
        return {
            value: '',//搜索框内容用于实现双向绑定
            // 搜索框的提示placeholder内容
            defaultKeyword: {},
            //搜索提示列表(输入框输入时)(调用实时搜索接口的时候把数据拿进来)
            dynamicSearchTipsArr: [],


            // 热门搜索数组
            hotKeywordList: [],
            // 历史记录数组
            historyKeywordList: [],
            //搜索出来的商品列表数组
            goodsList: [],



            // 下拉菜单分类数组
            filterCategory: [],
            // 类别id，代表下拉菜单中的全部、居家等选项
            categoryId: 0,
            // 分类(例如:全部还是居家)id或price
            sort: "id",
            // 排序:默认是降序
            order: 'desc',


            // 控制组件的显示隐藏(结合v-if)
            //1表示默认显示历史记录和热门搜索 historyANDhot
            //2 展示搜索提示列表 SearchTipsList.vue
            //3 展示搜索出来内容
            ifShow1: true,
            ifShow2: false,
            ifShow3: false
        };
    },
    mounted() {
        this.getsearchlist()
    },
    methods: {
        // 确定搜索时触发（回车时）
        onSearch() {
            // Toast(val);
            let params = {
                keyword: this.value,
                page: 1,
                size: 20,
                order: this.order, //按价格排序
                categoryId: this.categoryId, //分类排序id
                sort: this.sort, //按分类排序
            };
            // 调用搜索框商品搜索功能接口，获取对应的商品列表
            searchGoodsListApi(params).then(res => {
                // 显示搜到的内容
                this.ifShow3 = true
                this.ifShow1 = false
                this.ifShow2 = false
                this.goodsList = res.data.data.goodsList
                let temp = res.data.data.filterCategory
                temp = JSON.parse(JSON.stringify(temp).replace(/id/g, "value").replace(/name/g, "text"));
                this.filterCategory = temp
                console.log('搜到的商品列表数据', this.goodsList);
                console.log(res);
                // console.log('搜到的商品列表数据', res.data);

            })
        },
        onCancel() {
            // Toast('取消');
            // 点击取消时触发，返回home
            this.$router.push('/home')

        },
        // 输入框内容变化时触发
        onInput(val) {
            // 1、隐藏历史记录和热门搜索组件,展示搜索提示列表 SearchTipsList.vue组件
            this.ifShow1 = false
            this.ifShow2 = true
            this.ifShow3 = false
            // console.log(ifShow1);
            // 2、调用实时搜索接口
            dynamicSearchListApi({ keyword: val }).then(res => {
                console.log('实时搜索接口的数据', res);
                this.dynamicSearchTipsArr = res.data.data
            })
        },
        //调用历史记录和热门搜索接口
        async getsearchlist() {
            let res = await searchListApi()
            // 
            this.defaultKeyword = res.data.data.defaultKeyword
            this.historyKeywordList = res.data.data.historyKeywordList
            this.hotKeywordList = res.data.data.hotKeywordList
            this.historyKeywordList = res.data.data.historyKeywordList
            // console.log('搜索窗口展示的数据列表', res.data);
        },
        // 价格排序
        getPriceChangeVal(val1) {
            console.log(val1);
            this.order = val1,
            this.sort = "price"
            // 执行搜索框搜索事件，调用搜索功能接口
            this.onSearch()

        },
        // 分类筛选
        getcategoryChangeVal(val2) {
            console.log(val2);
            this.categoryId = val2
            this.sort = "id"
            // 执行搜索框搜索事件，调用搜索功能接口
            this.onSearch()
        },
        // 拿到历史记录和热门搜索组件传递的数据,点击历史记录和热门搜索数据就触发
        // 点击搜索列表提示触发 也触发
        getvalue(val3) {
            this.value = val3
            // 调用搜索商品列表接口(调用搜索事件)
            this.onSearch()
        }

    },
    components: {
        historyANDhot,//历史记录和热门索搜索组件
        serchTopCom,//综合-价格-分类组件
        searchTipCom,//搜索提示1组件
    }


}

</script>
<style scoped lang="less">
.con {
    width: 375px;
    height: 667px;
    // background-color: #B2B2B2;

}
</style>